<!-- 赠送祝福页面 -->
<template>
  <div class="page-container">
    <div class="content-box">
      <!-- 背景图 -->
      <van-image class="back-img" :src="require('@/assets/sendBack.png')" />
      <div class="float-box">
        <!-- 生日信息 -->
        <div class="honor-module">
          <div class="en-title">Sending Blessings</div>
          <div class="zh-title">送祝福啦</div>
          <div class="info name-info">
            <span class="info-label">Birthday Star / 寿星 : </span>
            <span class="info-value"> {{ posterData.owner ? posterData.owner.name : '' }}</span>
          </div>
          <div class="info">
            <span class="info-label">Date / 生日 : </span>
            <span class="info-value">{{ posterData.owner ? renderTime(posterData.owner.birthday, 'MM -DD') : '' }}</span>
          </div>
        </div>
        <!-- 发送祝福模块 -->
        <div class="send-module">
          <div class="bless-box">
            <textarea v-model="blessText" class="bless-text" :placeholder="'Send your blessings to him or her!\n快为TA送上祝福吧！'" />
          </div>
          <div class="btn-box">
            <van-button
              type="info"
              size="normal"
              round
              color="linear-gradient(143deg, #FF9AFF -13.21%, #FF337F 107.99%)"
              class="btn"
              @click="openGiftPopup()"
            >Gifts / 赠送礼物</van-button>
            <van-button
              :loading="sendLoad"
              round
              type="info"
              size="normal"
              color="linear-gradient(143deg, #FF9AFF -13.21%, #FF337F 107.99%)"
              class="btn"
              @click="sendBless()"
            >Blessings / 发送祝福</van-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 礼物弹窗 -->
    <GiftPopup ref="giftPopup" @confirm="sendGift" />
  </div>
</template>

<script>
import { Image as VanImage, Toast } from 'vant'
import { param2Obj } from '@/utils'
import GiftPopup from './popup/giftPopup.vue'
import { judgeBrowser } from '@/utils/index.js'
import TextFilter from '@/utils/filterWord.js'
export default {
  components: { VanImage, GiftPopup },
  data() {
    return {
      posterId: '', // 海报Id
      posterData: {}, // 海报数据
      blessData: [], // 祝福数据
      blessText: '',
      sendLoad: false
    }
  },
  mounted() {
    const { honorId, iframe } = param2Obj(window.location.href)
    // 手机端或者PC端嵌入的iframe
    if (judgeBrowser().isMobile || iframe) {
      this.posterId = honorId
      this.getPosterData()
    } else {
      this.$router.push({ path: '/pc', query: { src: window.location.href }})
    }
  },
  methods: {
    // 获取海报信息
    getPosterData() {
      const params = {
        honorId: this.posterId
      }
      this.$apis.honor.getPosterInfo(params).then(res => {
        this.posterData = res
        this.blessData = res.commentList
      })
    },
    // 渲染时间
    renderTime(data, standard) {
      const formatText = standard || 'YYYY-MM-DD HH:mm:ss'
      let time = ''
      if (data) time = this.$dayjs(data).format(formatText)
      return time
    },
    // 打开赠送礼物
    openGiftPopup() {
      this.$refs['giftPopup'].open()
    },
    // 发送祝福
    sendBless() {
      console.log(TextFilter(this.blessText, []))
      // 校验祝福是否为空或是否包含屏蔽词
      if (!this.blessText) return Toast(this.$t('tips.blessEmpty'))
      else if (TextFilter(this.blessText, []).flag) return Toast(this.$t('tips.shieldTip', { shield: TextFilter(this.blessText, []).shield }))
      // 发送祝福
      const params = {
        honorId: this.posterId,
        contentRaw: this.blessText,
        type: 'text'
      }
      this.sendLoad = true
      this.$apis.honor.sendHonorBless(params).then(res => {
        this.$router.push({ path: '/birthday/send/success' })
        Toast.success(this.$t('tips.sendSuccess'))
        this.sendLoad = false
      }).catch(() => {
        this.sendLoad = false
      })
    },
    sendGift(data) {
      // 发送礼物
      const params = {
        honorId: this.posterId,
        contentRaw: data,
        type: 'gift'
      }
      this.$apis.honor.sendHonorBless(params).then(res => {
        console.log(111)
        this.$router.push({ path: '/birthday/send/success' })
        Toast.success(this.$t('tips.giftSuccess'))
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-container {
  overflow: auto;
}
.content-box {
  width: 100%;
  position: relative;
  .float-box {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.honor-module {
  padding: 69px 66px 0 ;
  line-height: normal;
  color: #FFF;
  font-style: normal;
  .en-title {
    font-family: Poppins;
    font-size: 60px;
    font-weight: 700;
  }
  .zh-title {
    font-family: Inter;
    font-size: 54px;
    font-weight: 700;
    margin-bottom: 50px;
  }
  .info {
    font-family: Inter;
    .info-label{
      font-size: 28px;
      font-weight: 400;
    }
    .info-value {
      font-size: 30px;
      font-weight: 700;
    }
  }
  .name-info {
    margin-bottom: 15px;
  }
}
.send-module {
  padding: 41px 56px 0;
  .bless-box{
    display: flex;
    justify-content: center;
    margin-bottom: 53px;
    .bless-text {
      width: calc(100% - 70px);
      height: 390px;
      border: none;
      border-radius: 10px;
      padding: 40px 35px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      white-space: pre-wrap;
    }
    textarea::placeholder {
      color: #BABABA;
      font-family: Inter;
      font-size: 28px;
      font-style: normal;
      font-weight: 400;
      line-height: 40px;
      white-space: pre-wrap;
    }
  }
  .btn-box {
    display: flex;
    justify-content: space-between;
    .btn {
      min-width: 295px;
      height: 70px;
      color: #FFF;
      font-family: Inter;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}
/* 隐藏滚动条的整个容器 */
.page-container {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;  /* Firefox */
}
/* 针对Webkit内核浏览器的隐藏滚动条样式 */
.page-container::-webkit-scrollbar {
  display: none;
}
</style>
